<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div class="ebook-bookmark-down-wrapper" ref="iconDown">
        <span class="iconfont">&#xe600;</span>
      </div>
      <div class="ebook-bookmark-text">{{text}}</div>
    </div>
    <div class="ebook-bookmark-icon-wrapper" :style="isFixed ? fixedStyle : {}">
      <bookmark :color="color" :width="15" :height="35"></bookmark>
    </div>
  </div>
</template>

<script>
import Bookmark from '../common/Bookmark'
import { realPx } from '../../utils/utils'
import { ebookMixin } from '../../utils/mixin'
import { getBookMark, saveBookMark } from '../../utils/localStroage'
const WHITE = '#fff'
const BLUE = 'blue'
export default {
  name: 'EbookBookmark',
  components: { Bookmark },
  mixins: [ ebookMixin ],
  computed: {
    height () {
      return realPx(35)
    },
    threshold () {
      return realPx(55)
    },
    fixedStyle () {
      return {
        position: 'fixed',
        right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}px`,
        top: 0
      }
    }
  },
  watch: {
    offsetY (v) {
      if (!this.bookAvailable || this.menuVisible || this.settingVisible >= 0) {
        return
      }
      if (v >= this.height && v <= this.threshold) {
        this.beforeThreshold(v)
      } else if (v >= this.threshold) {
        this.afterThreshold(v)
      } else if (v > 0 && v < this.height) {
        this.beforeHeight()
      } else if (v === 0) {
        this.restore()
      }
    },
    isBookmark (isBookmark) {
      this.isFixed = isBookmark
      if (isBookmark) {
        this.color = BLUE
      } else {
        this.color = WHITE
      }
    }
  },
  data () {
    return {
      text: '',
      color: WHITE,
      isFixed: false
    }
  },
  methods: {
    addBookmark () {
      this.bookmark = getBookMark(this.fileName)
      if (!this.bookmark) {
        this.bookmark = []
      }
      const currentLocation = this.currentBook.rendition.currentLocation()
      // 通过正则表达式讲cfi后面的参数去除
      const cfibase = currentLocation.start.cfi.replace(/!.*/, '')
      // 正则表达式结束符号$
      const cfistart = currentLocation.start.cfi.replace(/.*!/, '').replace(/\)$/, '')
      const cfiend = currentLocation.end.cfi.replace(/.*!/, '').replace(/\)$/, '')
      // 获取范围内的内容
      const cfirange = `${cfibase}!,${cfistart},${cfiend})`
      this.currentBook.getRange(cfirange).then(range => {
        // 全局查询文本中两个空格的存在，变为空
        const text = range.toString().replace(/\s\s/g, '')
        this.bookmark.push({
          cfi: currentLocation.start.cfi,
          text: text
        })
        saveBookMark(this.fileName, this.bookmark)
      })
    },
    deleteBookmark () {
      const currentLocation = this.currentBook.rendition.currentLocation()
      const cfi = currentLocation.start.cfi
      this.bookmark = getBookMark(this.fileName)
      if (this.bookmark) {
        // 过滤掉缓存中与当前cfi相同的书签
        saveBookMark(this.fileName, this.bookmark.filter(item => item.cfi !== cfi))
        this.setIsBookmark(false)
      }
    },
    restore () {
      // 状态4：保持状态一致，进行归位延迟
      setTimeout(() => {
        this.$refs.bookmark.style.top = `${-this.height}px`
        this.$refs.iconDown.style.transform = ''
      }, 200)
      if (this.isFixed) {
        this.setIsBookmark(true)
        this.addBookmark()
      } else {
        this.setIsBookmark(false)
        this.deleteBookmark()
      }
    },
    beforeHeight () {
      // 状态1： 未超过书签的高度
      if (this.isBookmark) {
        this.text = this.$t('book.pulldownDeleteMark')
        this.color = BLUE
        this.isFixed = true
      } else {
        this.text = this.$t('book.pulldownAddMark')
        this.color = WHITE
        this.isFixed = false
      }
    },
    beforeThreshold (v) {
      // 状态2： 为到达临界状态
      this.$refs.bookmark.style.top = `${-v}px`
      // 判断是否为书签页面
      this.beforeHeight()
      const iconDown = this.$refs.iconDown
      if (iconDown.style.transform === 'rotate(180deg)') {
        iconDown.style.transform = ''
      }
    },
    afterThreshold (v) {
      // 状态3：超越临界状态
      this.$refs.bookmark.style.top = `${-v}px`
      if (this.isBookmark) {
        this.text = this.$t('book.releaseDeleteMark')
        this.color = WHITE
        this.isFixed = false
      } else {
        this.text = this.$t('book.releaseAddMark')
        this.color = BLUE
        this.isFixed = true
      }
      const iconDown = this.$refs.iconDown
      if (iconDown.style.transform === '') {
        iconDown.style.transform = 'rotate(180deg)'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/global.styl'
.ebook-bookmark
  position: absolute
  top: px2rem(-35)
  z-index: 200
  width: 100%
  left: 0
  height: px2rem(35)
  .ebook-bookmark-text-wrapper
    position: absolute
    bottom: 0
    right: px2rem(45)
    display: flex
    .ebook-bookmark-down-wrapper
      font-size: px2rem(14)
      color: white
      transition: all .2s linear
      center()
    .ebook-bookmark-text
      font-size: px2rem(14)
      color: white
  .ebook-bookmark-icon-wrapper
    position: absolute
    right: 0
    bottom: 0
    margin-right: px2rem(15)
</style>
